import { defineComponent, onMounted, ref, watch } from 'vue'
import { logMsg } from '@/utils/common'
import jsxGrandChild from './jsx-grand-child'

interface MyData {
  name: string
  list: string[]
}

export default defineComponent({
  props: ['msgFromParent'],
  setup(props) {
    const data = ref<MyData>({
      name: '',
      list: []
    })

    onMounted(() => {
      setList()
    })
    watch(
      () => props.msgFromParent,
      () => {
        console.log(props.msgFromParent)
      }
    )
    const setList = () => {
      for (let i = 0; i < 10; i++) {
        data.value.list.push('item' + (i + 1))
      }
    }
    const handleBlur = () => {
      logMsg(data.value.name)
    }
    const render = () => {
      return (
        <div>
          <div>来自父组件的数据</div>
          <div>{props.msgFromParent}</div>
          <el-input
            v-model={data.value.name}
            placeholder="hello world"
            onBlur={handleBlur}
          ></el-input>
          <div>
            {data.value.list.map((item) => {
              return <div>{item}</div>
            })}
          </div>
          <div>
            <h3>以下是jsx孙子组件内容</h3>
            <jsx-grand-child></jsx-grand-child>
          </div>
        </div>
      )
    }
    return render
  }
})
